<template>
  <div>
    <el-main>
      <div style="margin: 10px 0">
        <div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
          <div style="flex-basis: 45%;">
            <p>站点数（座）：<el-input v-model="params.r" style="width: 200px; margin-left: 15px;" type="number"
                min="1"></el-input></p>
            <p>首站压气站出站压力（MPa）:<el-input v-model="params.j" style="width: 200px; margin-left: 15px;" type="number"
                min="0"></el-input></p>
            <p>来气压力（MPa）:<el-input v-model="params.d2" style="width: 200px; margin-left: 15px;" type="number"
                min="0"></el-input></p>
            <p>压缩机组效率:<el-input v-model="params.n1" style="width: 200px; margin-left: 15px;" type="number"
                min="0"></el-input></p>
            <p>地温（K）:<el-input v-model="params.b2" style="width: 200px; margin-left: 15px;" type="number"
                min="0"></el-input></p>
          </div>
          <div style="flex-basis: 45%;">
            <p>站间距（km）:<el-input v-model="params.q" style="width: 200px; margin-left: 15px;" type="number"
                min="0"></el-input></p>
            <p>出站温度（K）：<el-input v-model="params.a2" style="width: 200px; margin-left: 15px;" type="number"
                min="0"></el-input></p>
            <p>站内损失（MPa）:<el-input v-model="params.f2" style="width: 200px; margin-left: 15px;" type="number"
                min="0"></el-input></p>
            <p>来气温度（K）:<el-input v-model="params.e2" style="width: 200px; margin-left: 15px;" type="number"
                min="0"></el-input></p>
            <p>管段传热系数（W/m²·K）：<el-input v-model="params.c2" style="width: 200px; margin-left: 15px;" type="number"
                min="0"></el-input></p>
          </div>
        </div>
        <br></br>
        <el-button plain type="primary" @click="generateTable" class="icon-right">生成</el-button>
        <el-button plain type="primary" @click="calculatePressures" class="icon-right">计算</el-button>
        <el-button plain type="primary" @click="initEcharts1">绘制</el-button>
        <el-button plain type="primary"
          @click="handleClickAndClear($event, ['r', 'q', 'j', 'a2', 'b2', 'c2', 'f2', 'n1', 'd2', 'e2'])">清零</el-button>
        <el-button plain type="primary" @click="save">存储</el-button>
        <el-button plain type="primary" @click="handleClickAndShow">编辑</el-button>
        <el-button plain type="primary" @click="exportTableToExcel">导出</el-button>
      </div>

      <el-table :data="tableData" border stripe>
        <el-table-column prop="id" label="站点号" width="70" align="center"></el-table-column>
        <el-table-column label="距离(km)" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.distance"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="inletPressure" label="进站压力(MPa)" width="120" align="center"></el-table-column>
        <el-table-column prop="boostPressure" label="站内增压(MPa)" align="center"></el-table-column>
        <el-table-column prop="outletPressure" label="出站压力(MPa)" align="center"></el-table-column>
        <el-table-column prop="averagePressure" label="平均压力(MPa)" align="center"></el-table-column>
        <el-table-column prop="pressureRatio" label="压比" align="center"></el-table-column>
        <el-table-column label="地温(℃)" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.groundTemperature"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="管段传热系数" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.heatTransferCoefficient"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="outletTemperature" label="出站温度(℃)" align="center"></el-table-column>
        <el-table-column prop="inletTemperature" label="进站温度(℃)" align="center"></el-table-column>
        <el-table-column prop="averageTemperature" label="平均温度(℃)" align="center"></el-table-column>
        <el-table-column prop="power" label="压缩机功率(MW)" align="center"></el-table-column>
      </el-table>
    </el-main>
    <el-dialog title="项目列表" v-model="listConf.show">
      <div class="pcomputed-dialog">
        <h3><el-button type="primary" @click="add" plain>新增项目</el-button></h3>
        <ul>
          <li v-for="item in filteredList" :key="item.id">
            <i>{{ filteredList.indexOf(item) + 1 }}</i>
            {{ item.name }}
            <el-button type="primary" @click="check(item)" link>编辑</el-button>
            <el-button type="danger" @click="del(item)" link>删除</el-button>
          </li>
        </ul>
      </div>
    </el-dialog>
    <div style="height: 400px;width:100%" id="echarts1"></div>
    <div style="height: 400px;width:100%" id="echarts2"></div>
  </div>
</template>


<script>


import FileSaver from "file-saver";
import * as XLSX from "xlsx";
import * as echarts from 'echarts';
export default {
  data() {
    return {
      listConf: {
        show: true,
        list: [
          {
            id: null,
            name: '',
            a: '',   //年输量
            b: '',   //年工作天数
            c: '',   //雷诺数
            d: '',   //管道直径
            e: '',   //管道壁厚
            f: '',   //管道总长度
            g: '',   //天然气温度
            h: '',   //天然气相对密度
            i: '',   //压缩因子
            j: '',   //末段起点最高压力，即压气站出站压力
            k: '',   //末段终点最低压力
            l: '',   //动力粘度
            m: '',   //摩阻系数
            n: '',   //输气流量
            o: '',   //末端最优长度
            p: '',   //储气能力
            q: '',   //站间距
            r: '',   //压气站数目
            s: '',   //设计压力
            t: '',   //钢材型号
            a2: '',  //出站温度
            b2: '',  //地温
            c2: '',  //管段传热系数
            d2: '',  //来气压力
            e2: '',  //来气温度
          },
        ],
      },
      params: {
        id: null,
        name: '',
        a: '',   //年输量
        b: '',   //年工作天数
        c: '',   //雷诺数
        d: '',   //管道直径
        e: '',   //管道壁厚
        f: '',   //管道总长度
        g: '',   //天然气温度
        h: '',   //天然气相对密度
        i: '',   //压缩因子
        j: '',   //首站进站压力
        k: '',   //末站出站压力
        l: '',   //动力粘度
        m: '',   //摩阻系数
        n: '',   //输气流量
        o: '',   //末端最优长度
        p: '',   //储气能力
        q: '',   //站间距
        r: '',   //压气站数目
        s: '',   //设计压力
        t: '',   //钢材型号
        a2: '',  //出站温度
        b2: '',  //地温
        c2: '',  //管段传热系数
        d2: '',  //来气压力
        e2: '',  //来气温度
      },
      tableData: [],
      form: {},
      headerBg: 'headerBg',
    }
  },
  created() {
    this.load()
  },
  mounted() {

  },
  watch: {

  },
  beforeUnmount() {
    this.exitsave(); // 在组件销毁前调用save方法  
    location.reload();
  },
  computed: {
    filteredList() {
      const username = this.$store.state.userInfo.username;
      return this.listConf.list.filter(item => item.username === username);
    },
  },
  methods: {
    initEcharts() {
      let echarts1Data = []
      let echarts2Data = []
      this.tableData.forEach(item => {
        echarts1Data.push([item.distance, +(item.inletPressure)], [item.distance, +(item.outletPressure)])
        echarts2Data.push([item.distance, +(item.inletTemperature)], [item.distance, +(item.outletTemperature)])
      })
      let chartDom1 = document.getElementById('echarts1');
      let myChart1 = echarts.init(chartDom1);
      let option1;
      let chartDom2 = document.getElementById('echarts2');
      let myChart2 = echarts.init(chartDom2);
      let option2;
      option1 = {
        title: {
          left: 'center',
          text: '管道运行压力变化图'
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          max: 15,
          type: 'value'
        },
        series: [
          {
            data: echarts1Data,
            type: 'line',
            showSymbol: true, // 显示数据点标记  
            lineStyle: {
              width: 2 // 线条宽度  
            }
          }
        ]
      };
      option1 && myChart1.setOption(option1);
      option2 = {
        title: {
          left: 'center',
          text: '管道运行温度变化图'
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          max: 360,
          min: 260,
          type: 'value'
        },
        series: [
          {
            data: echarts2Data,
            type: 'line',
            showSymbol: true, // 显示数据点标记  
            lineStyle: {
              width: 2 // 线条宽度  
            }
          }
        ]
      };
      option2 && myChart2.setOption(option2);
    },
    initEcharts1(event) {
      this.handleClick(event);
      let echarts1Data = [];
      let echarts2Data = [];
      this.tableData.forEach(item => {
        echarts1Data.push([item.distance, +(item.inletPressure)], [item.distance, +(item.outletPressure)])
        echarts2Data.push([item.distance, +(item.inletTemperature)], [item.distance, +(item.outletTemperature)])
      });
      let chartDom1 = document.getElementById('echarts1');
      let myChart1 = echarts.init(chartDom1);
      let option1;
      let chartDom2 = document.getElementById('echarts2');
      let myChart2 = echarts.init(chartDom2);
      let option2;
      option1 = {
        title: {
          left: 'center',
          text: '管道运行压力变化图'
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          max: 15,
          min: 3,
          type: 'value'
        },
        series: [
          {
            data: echarts1Data,
            type: 'line',
            showSymbol: true, // 显示数据点标记  
            lineStyle: {
              width: 2 // 线条宽度  
            }
          }
        ]
      };
      option1 && myChart1.setOption(option1);
      option2 = {
        title: {
          left: 'center',
          text: '管道运行温度变化图'
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          max: 360,
          min: 260,
          type: 'value'
        },
        series: [
          {
            data: echarts2Data,
            type: 'line',
            showSymbol: true, // 显示数据点标记  
            lineStyle: {
              width: 2 // 线条宽度  
            }
          }
        ]
      };
      option2 && myChart2.setOption(option2);
    },
    load() {
      this.$request.get("/computed", {
        params: {
          id: this.id,
          username: this.username,
          name: this.name,
          a: this.a,
          b: this.b,
          c: this.c,
          d: this.d,
          e: this.e,
          f: this.f,
          g: this.g,
          h: this.h,
          i: this.i,
          j: this.j,
          k: this.k,
          l: this.l,
          m: this.m,
          n: this.n,
          o: this.o,
          p: this.p,
          q: this.q,
          r: this.r,
          s: this.s,
          t: this.t,
          a2: this.a2,
          b2: this.b2,
          c2: this.c2,
          d2: this.d2,
          e2: this.e2,
        }
      }).then(res => {
        this.listConf.list = res
      })
    },
    generateTable(event) {
      this.handleClick(event)
      if (this.params.r < 1) {
        this.$message.error('请输入有效的行数（大于0）');
        return;
      }
      // 使用parseFloat确保输入的是数字类型    
      const q = parseFloat(this.params.q);
      const r = parseFloat(this.params.r);
      const o = parseFloat(this.params.o);

      if (isNaN(q) || q < 0) {
        this.$message.error('请输入有效的距离（大于等于0）');
        return;
      }

      this.tableData = []; // 清空当前表格数据    
      for (let i = 1; i <= r; i++) {
        let distance;

        if (i === r) {
          distance = (i - 2) * q + o;
        } else {
          // 对于其他行，使用常规计算方式  
          distance = (i - 1) * q;
        }

        this.tableData.push({
          id: i,
          distance: distance.toFixed(2), // 在添加到 tableData 时再转换为字符串  
          // 设置出站压力，第一行为首站压气站出站压力，其他行为null（后续计算）  
          outletPressure: this.params.j,
          outletTemperature: this.params.a2,
          heatTransferCoefficient: this.params.c2,
          groundTemperature: this.params.b2,
          // 初始化平均压力和平均温度，将在calculatePressures中计算  
          averagePressure: null,
          averageTemperature: null,
        });
      }
    },
    generateTable1() {
      if (this.params.r < 1) {
        this.$message.error('请输入有效的行数（大于0）');
        return;
      }
      // 使用parseFloat确保输入的是数字类型    
      const q = parseFloat(this.params.q);
      const r = parseFloat(this.params.r);
      const o = parseFloat(this.params.o);
      if (isNaN(q) || q < 0) {
        this.$message.error('请输入有效的距离（大于等于0）');
        return;
      }
      this.tableData = []; // 清空当前表格数据    
      for (let i = 1; i <= r; i++) {
        let distance;

        if (i === r) {
          distance = (i - 2) * q + o;
        } else {
          // 对于其他行，使用常规计算方式  
          distance = (i - 1) * q;
        }
        this.tableData.push({
          id: i,
          distance: distance.toFixed(2), // 在添加到 tableData 时再转换为字符串  
          // 设置出站压力，第一行为首站压气站出站压力，其他行为null（后续计算）  
          outletPressure: this.params.j,
          outletTemperature: this.params.a2,
          heatTransferCoefficient: this.params.c2,
          groundTemperature: this.params.b2,
          // 初始化平均压力和平均温度，将在calculatePressures中计算  
          averagePressure: null,
          averageTemperature: null,
        });
      }
    },

    calculatePressures(event) {
      this.handleClick(event)
      const C0 = (this.params.m * this.params.i * this.params.g * this.params.h) / (Math.pow(0.03848, 2) * Math.pow(this.params.d - this.params.e, 5));
      //num4为管道流量 m³/s
      const num4 = this.params.a * Math.pow(10, 8) / (this.params.b * 24 * 3600)
      const a2 = this.params.a2;
      const b2 = this.params.b2;
      const n1 = this.params.n1;
      const G = this.params.a * 100000000 / (this.params.b * 24 * 3600) * 1.29 * this.params.h;
      //const a = (this.params.c2 * 3.14 * this.params.d) / (2156 * (this.params.a * 100000000 / (this.params.b * 24 * 3600) * 1.29 * this.params.h))
      this.tableData.forEach((row, index) => {
        // 确保进站压力和站内增压和出站压力是数字类型  
        row.inletPressure = parseFloat(row.inletPressure) || 0; // 如果转换失败则默认为0  
        row.boostPressure = parseFloat(row.boostPressure) || 0; // 如果转换失败则默认为0 
        row.outletPressure = parseFloat(row.outletPressure) || 0;// 如果转换失败则默认为0
        if (index === 0) {
          row.inletPressure = parseFloat(this.params.d2);
          row.boostPressure = (parseFloat(row.outletPressure) - parseFloat(row.inletPressure) + parseFloat(this.params.f2)).toFixed(2);
          row.pressureRatio = (parseFloat(row.outletPressure) / parseFloat(row.inletPressure)).toFixed(2);
          row.inletTemperature = parseFloat(this.params.e2).toFixed(2);
          row.inletPressure = row.inletPressure.toFixed(2);
          let H = 1.4 / 0.4 * this.params.i * 478.38 * parseFloat(row.inletTemperature) * ((Math.pow(parseFloat(row.pressureRatio), (0.4 / 1.4))) - 1) / 1000000;
          row.power = (G * H / n1).toFixed(2);
        } else {
          // 对于其他行，根据前一行的出站压力来计算进站压力  
          row.inletPressure = ((Math.sqrt((Math.pow(this.tableData[index - 1].outletPressure * 1000000, 2)) -
            C0 * (this.tableData[index].distance - this.tableData[index - 1].distance) * 1000 * Math.pow(num4, 2))) / 1000000)
          row.boostPressure = (parseFloat(row.outletPressure) - parseFloat(row.inletPressure)) + parseFloat(this.params.f2)
          // 计算平均压力
          row.averagePressure = (((2 / 3) * (this.tableData[index - 1].outletPressure +
            Math.pow(this.tableData[index].inletPressure, 2) / ((this.tableData[index - 1].outletPressure + this.tableData[index].inletPressure))))).toFixed(2);
          row.inletPressure = row.inletPressure.toFixed(2);
          row.boostPressure = row.boostPressure.toFixed(2);
          // 计算压比  
          row.pressureRatio = (parseFloat(row.outletPressure) / parseFloat(row.inletPressure))
          row.pressureRatio = row.pressureRatio.toFixed(2);
        }

        if (index > 0) {
          const a = (row.heatTransferCoefficient * 3.14 * this.params.d) / (2156 * (this.params.a * 100000000 / (this.params.b * 24 * 3600) * 1.29 * this.params.h));
          const num8 = parseFloat(parseFloat(row.groundTemperature) + (parseFloat(a2) - parseFloat(row.groundTemperature)) * Math.exp(-a * (parseFloat(this.tableData[index].distance) - parseFloat(this.tableData[index - 1].distance)) * 1000));
          const num10 = parseFloat(a2 / 3 + 2 * num8 / 3);
          row.inletTemperature = num8.toFixed(2);
          row.averageTemperature = num10.toFixed(2);
        }

        if (index > 0) {
          let H = 1.4 / 0.4 * this.params.i * 478.38 * parseFloat(row.averageTemperature) * ((Math.pow(parseFloat(row.pressureRatio), (0.4 / 1.4))) - 1) / 1000000;
          row.power = (G * H / n1).toFixed(2);
        }

        // 设置出站温度
        if (index < this.tableData.length - 1) {
          row.outletTemperature = this.params.a2;
        }

      });

      this.initEcharts();

    },
    calculatePressures1() {
      const C0 = (this.params.m * this.params.i * this.params.g * this.params.h) / (Math.pow(0.03848, 2) * Math.pow(this.params.d - this.params.e, 5));
      //num4为管道流量 m³/s
      const num4 = this.params.a * Math.pow(10, 8) / (this.params.b * 24 * 3600)
      const a2 = this.params.a2;
      const b2 = this.params.b2;
      const n1 = this.params.n1;
      const G = this.params.a * 100000000 / (this.params.b * 24 * 3600) * 1.29 * this.params.h;
      //const a = (this.params.c2 * 3.14 * this.params.d) / (2156 * (this.params.a * 100000000 / (this.params.b * 24 * 3600) * 1.29 * this.params.h))
      this.tableData.forEach((row, index) => {
        // 确保进站压力和站内增压和出站压力是数字类型  
        row.inletPressure = parseFloat(row.inletPressure) || 0; // 如果转换失败则默认为0  
        row.boostPressure = parseFloat(row.boostPressure) || 0; // 如果转换失败则默认为0 
        row.outletPressure = parseFloat(row.outletPressure) || 0;// 如果转换失败则默认为0
        if (index === 0) {
          row.inletPressure = parseFloat(this.params.d2);
          row.boostPressure = (parseFloat(row.outletPressure) - parseFloat(row.inletPressure) + parseFloat(this.params.f2)).toFixed(2);
          row.pressureRatio = (parseFloat(row.outletPressure) / parseFloat(row.inletPressure)).toFixed(2);
          row.inletTemperature = parseFloat(this.params.e2).toFixed(2);
          row.inletPressure = row.inletPressure.toFixed(2);
          let H = 1.4 / 0.4 * this.params.i * 478.38 * parseFloat(row.inletTemperature) * ((Math.pow(parseFloat(row.pressureRatio), (0.4 / 1.4))) - 1) / 1000000;
          row.power = (G * H / n1).toFixed(2);
        } else {
          // 对于其他行，根据前一行的出站压力来计算进站压力  
          row.inletPressure = ((Math.sqrt((Math.pow(this.tableData[index - 1].outletPressure * 1000000, 2)) -
            C0 * (this.tableData[index].distance - this.tableData[index - 1].distance) * 1000 * Math.pow(num4, 2))) / 1000000)
          row.boostPressure = (parseFloat(row.outletPressure) - parseFloat(row.inletPressure)) + parseFloat(this.params.f2)
          // 计算平均压力

          row.averagePressure = (((2 / 3) * (this.tableData[index - 1].outletPressure +
            Math.pow(this.tableData[index].inletPressure, 2) / ((this.tableData[index - 1].outletPressure + this.tableData[index].inletPressure))))).toFixed(2);
          row.inletPressure = row.inletPressure.toFixed(2);
          row.boostPressure = row.boostPressure.toFixed(2);
          // 计算压比  
          row.pressureRatio = (parseFloat(row.outletPressure) / parseFloat(row.inletPressure))
          row.pressureRatio = row.pressureRatio.toFixed(2);
        }

        if (index > 0) {
          const a = (row.heatTransferCoefficient * 3.14 * this.params.d) / (2156 * (this.params.a * 100000000 / (this.params.b * 24 * 3600) * 1.29 * this.params.h));
          const num8 = parseFloat(parseFloat(row.groundTemperature) + (parseFloat(a2) - parseFloat(row.groundTemperature)) * Math.exp(-a * (parseFloat(this.tableData[index].distance) - parseFloat(this.tableData[index - 1].distance)) * 1000));
          const num10 = parseFloat(a2 / 3 + 2 * num8 / 3);
          row.inletTemperature = num8.toFixed(2);
          row.averageTemperature = num10.toFixed(2);
        }

        if (index > 0) {
          let H = 1.4 / 0.4 * this.params.i * 478.38 * parseFloat(row.averageTemperature) * ((Math.pow(parseFloat(row.pressureRatio), (0.4 / 1.4))) - 1) / 1000000;
          row.power = (G * H / n1).toFixed(2);
        }

        // 设置出站温度
        if (index < this.tableData.length - 1) {
          row.outletTemperature = this.params.a2;
        }

      });

      this.initEcharts();

    },
    handleClickAndShow(event) {
      this.listConf.show = true;
      this.handleClick(event);
    },
    show(event) {
      this.handleClick(event)
    },
    add() {
      const newData = {
        username: this.$store.state.userInfo.username,
        name: '新的项目',
        // 其他字段可以省略，或者根据需要设置为空字符串或null  
        // 在这个例子中，我们省略了其他字段，因为它们不是必需的  
      };

      this.$request.post("/computed", newData).then(res => {
        if (res) { // 假设后端响应包含一个success字段来表示操作是否成功  
          this.$message.success("保存成功");
        } else {
          this.$message.error("保存失败");
        }
      }).catch(error => {
        console.error(error); // 输出错误信息到控制台，便于调试  
        this.$message.error("保存过程中发生错误");
      });
      location.reload();
    },
    del(item, idx) {
      if (this.params.id === item.id) this.params = {};
      const id = item.id
      this.$request.delete("/computed/" + id).then(res => {
        if (res) {
          this.$message.success("删除成功")
        } else {
          this.$message.error("删除失败")
        }
      })
      location.reload();
    },
    save(event) {
      this.handleClick(event)
      if (!this.isCheck()) return;
      const { listConf: { list }, params } = this;
      const idx = list.findIndex(v => v.id === params.id);
      if (!~idx) return;
      list.splice(idx, 1, JSON.parse(JSON.stringify(params)))
      this.$request.post("/computed", this.params).then(res => {
        if (res) {
          this.$message.success("保存成功")
        } else {
          this.$message.error("保存失败")
        }
      })
      location.reload();
    },
    exitsave() {
      if (!this.isCheck1()) return;
      const { listConf: { list }, params } = this;
      const idx = list.findIndex(v => v.id === params.id);
      if (!~idx) return;
      list.splice(idx, 1, JSON.parse(JSON.stringify(params)))
      this.$request.post("/computed", this.params).then(res => {
        if (res) {
          this.$message.success("保存成功")
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    handleClickAndClear(event, keysToClear) {
      // 先执行 handleClick 的逻辑  

      let target = event.target;
      if (target.nodeName == "I" || target.nodeName == "SPAN") {
        target = event.target.parentNode;
      }
      target.blur();

      // 然后执行 clear 的逻辑来清空参数  
      this.clear(keysToClear);

      // 可以在这里继续添加其他操作  
    },
    check(item) {
      this.listConf.show = false;
      this.params = JSON.parse(JSON.stringify(item))
      this.generateTable1();
      this.calculatePressures1();
    },
    clear(keys) {
      keys.forEach(k => {
        this.params[k] = '';
      });
    },
    isCheck() {
      if (!this.params.id) return (this.$message.error('请选择项目'), 0)
      return true;
    },

    isCheck1() {
      if (!this.params.id) return
      return true;
    },
    isNull(v) {
      return ['', null, undefined].includes(v);
    },
    handleClick(event) {
      // 点击后鼠标移开恢复按钮默认样式(如果按钮没有加icon图标的话，target.nodeName == "I"可以去掉)
      let target = event.target;
      if (target.nodeName == "I" || target.nodeName == "SPAN") {
        target = event.target.parentNode;
      }
      target.blur();
      //进行其他操作
    },
    exportTableToExcel(event) {
      this.handleClick(event);
      const wb = XLSX.utils.book_new(); // 创建新的工作簿    
      const ws = XLSX.utils.json_to_sheet(this.tableData); // 将数据转换为工作表    
      XLSX.utils.book_append_sheet(wb, ws, "数据"); // 将工作表添加到工作簿，并命名为“数据”  
      const excelData = XLSX.write(wb, { bookType: 'xlsx', type: 'buffer' }); // 将工作簿输出为Excel文件内容    
      saveAs(new Blob([excelData]), '数据.xlsx'); // 使用FileSaver保存文件，并命名为“数据.xlsx”  
    },
  }
}
</script>

<style lang="scss">
p {
  color: #4c4c4c;
  font-size: 15px;
  margin-top: 0px;
  padding: 5px;
  gap: 10px;

  >img {
    width: 200px;
  }
}

.headerBg {
  background: #eee !important;
}

.my-button {
  margin-right: 10px;
  /* 调整按钮间距 */
  display: inline-block;
  /* 确保按钮是内联块级元素 */
  vertical-align: middle;
  /* 确保按钮垂直居中 */
}

/* 最后一个按钮不需要右边距 */
.my-button:last-child {
  margin-right: 0;
}

/* 如果图标导致布局问题，可以调整图标样式 */
.icon-right {
  margin-left: 5px;
  /* 调整图标与文本之间的间距 */

}

.pcomputed-dialog {
  >h3 {
    @include n-row1;
    justify-content: flex-end;
  }

  >ul {
    margin-top: 20px;

    >li {
      @include n-row1;
      gap: 10px;
      font-size: 14px;
      color: #555;
      border-bottom: 1px solid #eee;
      height: 40px;

      >i {
        color: #999;
      }

      .el-button {
        margin-left: auto;

        &+.el-button {
          margin-left: 0;
        }
      }
    }
  }
}
</style>